import {
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  SendOutlined,
} from "@ant-design/icons";
import {
  Button,
  Popconfirm,
  Select,
  Space,
  Tag,
  Tooltip,
  TreeSelect,
} from "antd";
import moment from "moment-timezone";

// 根据目标类型渲染选择器
export const renderTargetSelector = (
  targetType: string,
  users: any[],
  roles: any[],
  depts: any[]
) => {
  switch (targetType) {
    case "user":
      return (
        <Select
          mode="multiple"
          placeholder="选择用户"
          showSearch
          filterOption={(input, option) =>
            (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
          }
          options={users.map((user) => ({
            label: `${user.user_name}(${user.nick_name || "无昵称"})`,
            value: user.id,
          }))}
        />
      );
    case "role":
      return (
        <Select
          mode="multiple"
          placeholder="选择角色"
          options={roles.map((role) => ({
            label: role.dict_name,
            value: role.dict_id,
          }))}
        />
      );
    case "dept":
      return (
        <TreeSelect
          multiple
          placeholder="选择部门"
          treeData={formatDeptTreeData(depts)}
          treeDefaultExpandAll
          treeCheckable
          showCheckedStrategy="SHOW_PARENT"
          treeNodeFilterProp="title"
          style={{ width: "100%" }}
        />
      );
    case "all":
      return <div style={{ color: "#999" }}>将发送给所有用户</div>;
    default:
      return null;
  }
};

export function tableColumns(handleEdit: any, handleSend: any, handleDelete: any, noticeTypeOptions: any[], priorityOptions: any[], statusOptions: any[]) {
  // 表格列定义
  return [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      width: 200,
      ellipsis: true,
    },
    {
      title: "类型",
      dataIndex: "notice_type",
      key: "notice_type",
      width: 100,
      render: (value: string) => {
        const option = noticeTypeOptions.find((opt) => opt.value === value);
        return <Tag color={option?.color}>{option?.label}</Tag>;
      },
    },
    {
      title: "优先级",
      dataIndex: "priority",
      key: "priority",
      width: 100,
      render: (value: number) => {
        const option = priorityOptions.find((opt) => opt.value === value);
        return <Tag color={option?.color}>{option?.label}</Tag>;
      },
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      render: (value: number) => {
        const option = statusOptions.find((opt) => opt.value === value);
        return <Tag color={option?.color}>{option?.label}</Tag>;
      },
    },
    {
      title: "创建人",
      dataIndex: "creator_name",
      key: "creator_name",
      width: 120,
    },
    {
      title: "创建时间",
      dataIndex: "create_time",
      key: "create_time",
      width: 160,
      render: (value: string) => moment(value).format("YYYY-MM-DD HH:mm"),
    },
    {
      title: "操作",
      key: "action",
      width: 200,
      fixed: "right" as const,
      render: (_: any, record: any) => (
        <Space size="small">
          <Tooltip title="查看">
            <Button
              type="link"
              size="small"
              icon={<EyeOutlined />}
              onClick={() => handleEdit(record)}
            />
          </Tooltip>
          {record.status === 0 && (
            <>
              <Tooltip title="编辑">
                <Button
                  type="link"
                  size="small"
                  icon={<EditOutlined />}
                  onClick={() => handleEdit(record)}
                />
              </Tooltip>
              <Tooltip title="发送">
                <Popconfirm
                  title="确定发送该通知吗？"
                  onConfirm={() => handleSend(record)}
                >
                  <Button type="link" size="small" icon={<SendOutlined />} />
                </Popconfirm>
              </Tooltip>
            </>
          )}
          <Tooltip title="删除">
            <Popconfirm
              title="确定删除吗？"
              onConfirm={() => handleDelete([record.id])}
            >
              <Button
                type="link"
                size="small"
                danger
                icon={<DeleteOutlined />}
              />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];
}

// 转换部门数据为TreeSelect格式
const formatDeptTreeData = (depts: any[]): any[] => {
  return depts.map((dept) => ({
    title: dept.title || dept.dept_name,
    value: dept.key || dept.id,
    key: dept.key || dept.id,
    children: dept.children ? formatDeptTreeData(dept.children) : undefined,
  }));
};
